<template>
    <div class="waybill-search-container">
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div class="operation-buttons">
                <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red"
                    title="这是一段内容确定删除吗？">
                    <el-button slot="reference">批量操作</el-button>
                </el-popconfirm>
                <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red"
                    title="这是一段内容确定导入吗？">
                    <el-button slot="reference"> 导入 </el-button>
                </el-popconfirm>
                    <el-button type="primary" @click="exportExcel()"> 导出 </el-button>
                <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red"
                    title="这是一段内容确定打印吗？">
                    <el-button slot="reference"> 打印 </el-button>
                </el-popconfirm>
            </div>
            <el-form-item label="订单状态">
                <el-select v-model="ruleForm.orderStatus" placeholder="全部">
                    <el-option label="待审核" value="待审核"></el-option>
                    <el-option label="待调度" value="待调度"></el-option>
                    <el-option label="已签收" value="已签收"></el-option>
                    <el-option label="已拒绝" value="已拒绝"></el-option>
                    <el-option label="运输中" value="运输中"></el-option>
                    <el-option label="已取消" value="已取消"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="回单状态">
                <el-select v-model="ruleForm.confirmationStatus" placeholder="全部">
                    <el-option label="未回收" value="未回收"></el-option>
                    <el-option label="已回收" value="已回收"></el-option>
                    <el-option label="已寄出" value="已寄出"></el-option>
                    <el-option label="已确认" value="已确认"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发货日期">
                <el-col :span="11">
                    <el-form-item prop="senderTime1">
                        <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                            v-model="ruleForm.senderTime1" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-form-item prop="senderTime2">
                        <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                            v-model="ruleForm.senderTime2" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="签收日期">
                <el-col :span="11">
                    <el-form-item prop="receiptTime1">
                        <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                            v-model="ruleForm.receiptTime1" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-form-item prop="receiptTime2">
                        <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                            v-model="ruleForm.receiptTime2" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入关键词搜索" v-model="ruleForm.orderId"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getAll('ruleForm')">搜索</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="orderId" label="订单号">
            </el-table-column>
            <el-table-column prop="customer" label="客户">
            </el-table-column>
            <el-table-column prop="confirmationStatus" label="回单状态">
            </el-table-column>
            <el-table-column prop="orderStatus" label="订单状态">
            </el-table-column>
            <el-table-column prop="confirmationCount" label="回单份数">
            </el-table-column>
            <el-table-column prop="shippingAddress" label="发货地址">
            </el-table-column>
            <el-table-column prop="senderTime" label="发货时间">
            </el-table-column>
            <el-table-column prop="receivingAddress" label="收货地址">
            </el-table-column>
            <el-table-column prop="totalQuantity" label="签收数量">
            </el-table-column>
            <el-table-column prop="signerName" label="签收人">
            </el-table-column>
            <el-table-column label="签收时间" prop="receiptTime">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="huiDan(scope.row)" type="text" size="small">上传回单</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <el-dialog title="上传回单" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="快递公司">
                    <el-input v-model="form.courierCompany"></el-input>
                </el-form-item>
                <el-form-item label="邮寄单号">
                    <el-input v-model="form.trackingNumber"></el-input>
                </el-form-item>
                <el-form-item label="寄件时间">
                    <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                        v-model="form.shippingTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="上传回单">
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl " :src="imageUrl " class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="toHuiDan()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
import Receipt from './Receipt.vue';
export default {
    data() {
        return {
            tableData: [],
            multipleSelection: [],
            options: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            Receipt: [],
            ruleForm: {},
            dialogFormVisible: false,
            form: {},
            imageUrl : '',
        };
    },
    methods: {
        exportExcel(){
            const url = '/api/om/receipt-confirmation/exportExcel';
            window.location.href = url;
        },
        toHuiDan() {
            axios.post("/api/om/receipt-confirmation/toHuiDan", this.form).then((res) => {
                this.dialogFormVisible = false;
                this.getAll();
            })
        },
        huiDan() {
            this.form = {};
            this.dialogFormVisible = true;
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl  = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg/jpg/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        resetForm() {
            this.ruleForm = {};
            this.getAll();
        },
        getAll() {
            axios.post(`/api/om/receipt-confirmation/getAll?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.ruleForm).then((res) => {
                this.tableData = res.data.records;
                this.total = res.data.total;
            });
        },
        handleSizeChange(val) {
            console.log(`每页 val 条`);
            this.pageSize = val;
            this.getAll();
        },
        handleCurrentChange(val) {
            console.log(`每页 val 条`);
            this.pageNum = val;
            this.getAll();
        },
        findReceipt() {
            axios.post('/api/om/receipt/findReceipt').then((res) => {
                this.Receipt = res.data;
            }).catch((err) => {
                console.log(err);
                this.$message.error('请求出错: ' + err.message);
            });
        },
    },
    created() {
        this.getAll();
        this.findReceipt();
    },
}
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.waybill-search-container {
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
}

.operation-buttons {
    margin-bottom: 10px;
}

.line {
    text-align: center;
}
</style>